<template>
  <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()" label-width="120px">
      <el-form-item label="赛事名称" prop="matchName">
        <el-input v-model="dataForm.matchName" placeholder="赛事名称"></el-input>
      </el-form-item>
      <el-form-item label="赛事等级" prop="matchLevel">
        <ren-select v-model="dataForm.matchLevel" dict-type="matchLevel" placeholder="赛事等级" disabled></ren-select>
      </el-form-item>
      <el-form-item label="母赛事" prop="matchParentId">
        <el-select v-model="dataForm.matchParentId" placeholder="母赛事" disabled>
          <el-option value="">请选择</el-option>
          <el-option v-for="item in matchList" :key="item.id" :label="item.matchName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="province">
        <el-select style="width: 285px" placeholder="请选择" v-model="dataForm.province" @change="selectCity" disabled>
          <el-option :value="selectedIndex" label="全国">全国</el-option>
          <el-option v-for="itemO in area.item" :key="itemO.code" :label="itemO.name" :value="itemO.code" > </el-option>
        </el-select>
        ~
        <el-select style="width: 285px" placeholder="请选择" v-model="dataForm.city" disabled>
          <el-option :value="selectedIndex" label="全市">全部</el-option>
          <el-option v-for="itemO in areaCity.item" :key="itemO.code" :label="itemO.name" :value="itemO.code"> </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否跨地区" prop="isOpen">
        <ren-radio-group v-model="dataForm.isOpen" dict-type="isOpen" disabled></ren-radio-group>
      </el-form-item>
      <el-form-item label="赛季年度" prop="season">
        <ren-select v-model="dataForm.season" dict-type="season" placeholder="赛季年度" disabled></ren-select>
      </el-form-item>
      <el-form-item label="届数" prop="times">
        <el-input v-model="dataForm.times" placeholder="届数" disabled></el-input>
      </el-form-item>
      <el-form-item label="报名时间" prop="beginSignup">
        <el-date-picker type="date" placeholder="报名时间起" value-format="YYYY-MM-DD" v-model="dataForm.beginSignup" disabled></el-date-picker>
        ~
        <el-date-picker type="date" placeholder="报名时间止" value-format="YYYY-MM-DD" v-model="dataForm.endSignup" disabled></el-date-picker>
      </el-form-item>
      <el-form-item label="比赛时间" prop="beginDate">
        <el-date-picker type="date" placeholder="比赛时间起" value-format="YYYY-MM-DD" v-model="dataForm.beginDate" disabled></el-date-picker>
        ~
        <el-date-picker type="date" placeholder="比赛时间止" value-format="YYYY-MM-DD" v-model="dataForm.endDate" disabled></el-date-picker>
      </el-form-item>
      <el-form-item label="管理员" prop="adminId">
        <el-select v-model="dataForm.adminId" placeholder="请选择" disabled>
          <el-option v-for="item in sysUserList" :key="item.id" :label="item.realName" :value="parseInt(item.id)"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="赛事状态" prop="status">
        <ren-radio-group v-model="dataForm.status" dict-type="matchStatus"></ren-radio-group>
      </el-form-item>
      <el-form-item label="可报名项" prop="status" v-if="parseInt(dataForm.matchLevel+'') == 1 || parseInt(dataForm.matchLevel+'') ==2 ">
        <el-radio-group v-model="dataForm.allowQty">
          <el-radio :label="0">可任意兼项</el-radio>
          <el-radio :label="1">只可报名1项</el-radio>
          <el-radio :label="3">可任意报名2项</el-radio>
          <el-radio :label="2">可报1项个人+1项团体</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--启用后，校验赛项配置的是否兼项配置-->
      <el-form-item label="赛项兼项控制" prop="allowJx" v-if="parseInt(dataForm.matchLevel+'') == 1 || parseInt(dataForm.matchLevel+'') == 2">
        <el-radio-group v-model="dataForm.allowJx">
          <el-radio label="1">启用</el-radio>
          <el-radio label="0">不启用</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--报名日期已截止-->
      <el-form-item label="报名日期已截止" prop="stopSignup" >
        <el-radio-group v-model="dataForm.stopSignup" disabled>
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <!--是否-->
      <el-form-item label="上传报名表" prop="needRegistFile" >
        <el-radio-group v-model="dataForm.needRegistFile">
          <el-radio label="1">是</el-radio>
          <el-radio label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选手参赛证图" prop="pic" v-if="dataForm.pic">
        <img v-if="dataForm.pic" :src="dataForm.pic" class="avatar" width="100" height="150" />
      </el-form-item>
      <el-form-item label="领队参赛证图" prop="pic2" v-if="dataForm.pic2">
        <img v-if="dataForm.pic2" :src="dataForm.pic2" class="avatar" width="100" height="150" />
      </el-form-item>
      <el-form-item label="选手号码布图" prop="pic3" v-if="dataForm.pic3">
        <img v-if="dataForm.pic3" :src="dataForm.pic3" class="avatar" width="100" height="150" />
      </el-form-item>
      <el-form-item label="选手获奖证书图" prop="pic4" v-if="dataForm.pic4">
        <img v-if="dataForm.pic4" :src="dataForm.pic4" class="avatar" width="100" height="150" />
      </el-form-item>
      <el-form-item label="老师荣誉证书图" prop="pic5" v-if="dataForm.pic5">
        <img v-if="dataForm.pic5" :src="dataForm.pic5" class="avatar" width="100" height="150" />
      </el-form-item>
      <!--承诺书模板-->
      <el-form-item label="承诺书模板" prop="picUploadUrl">
        <el-upload class="avatar-uploader" :action="picUploadUrl" :show-file-list="false" :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'promissFile')" :before-upload="beforeAvatarUploadPromiss">
          <el-icon class="el-icon--upload" style="width: 200px; height: 50px"><upload-filled /></el-icon>
          <div style="color: red"></div>
        </el-upload>
        <a v-if="dataForm.promissFile" :href="dataForm.promissFile">查看文件</a>
        <a v-if="dataForm.promissFile" @click="deleteRegistFile('promissFile')" style="margin-left: 20px;">删除</a>
      </el-form-item>
      <!--报名表模板-->
      <el-form-item label="报名表模板" prop="needRegistFile" v-if="dataForm.needRegistFile == '1'">
        <el-upload class="avatar-uploader" :action="picUploadUrl" :show-file-list="false" :on-success="(response, file, fileList) => handleAvatarSuccess(response, file, fileList, 'registFile')" :before-upload="beforeAvatarUploadPromiss">
          <el-icon class="el-icon--upload" style="width: 200px; height: 50px"><upload-filled /></el-icon>
          <div style="color: red"></div>
        </el-upload>
        <a v-if="dataForm.registFile" :href="dataForm.registFile">查看文件</a>
        <a v-if="dataForm.registFile" @click="deleteRegistFile('registFile')" style="margin-left: 20px;">删除</a>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input-number v-model="dataForm.sort" controls-position="right" :min="0" label="排序"></el-input-number>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t("confirm") }}</el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import baseService from "@/service/baseService";
import { useDebounce } from "@/utils/utils";
import app from "@/constants/app";
import { getToken } from "@/utils/cache";
import { IObject } from "@/types/interface";
export default defineComponent({
  setup() {
    return reactive({
      visible: false,
      picUploadUrl: "",
      dataForm: {
        id: "",
        matchName: "",
        matchLevel: 1,
        matchParentId: "",
        province: "",
        city: "",
        isOpen: 0,
        season: "",
        beginDate: "",
        endDate: "",
        beginSignup: "",
        endSignup: "",
        adminId: "",
        status: 1,
        times: "",
        pic: "",
        pic2: "",
        pic3: "",
        pic4: "",
        pic5: "",
        promissFile: "",
        allowQty: 2,
        sort: "0",
        allowJx:  '0',
        adminName: '',
        registFile: "",
        stopSignup: '0',
        needRegistFile: '0',
      },
      area: { code: "0", item: [{ code: "0", name: "请选择" }] },
      areaCity: { code: "0", item: [{ code: "0", name: "请选择" }] },
      matchList: [
        {
          id: "",
          matchName: ""
        }
      ],
      sysUserList: [{ id: "", username: "", realName: "" }],
      selectedIndex: "-1"
    });
  },
  computed: {
    dataRule() {
      return {
        matchName: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        matchLevel: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        isOpen: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        season: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        times: [{ required: true, message: "请输入届数", trigger: "blur" }],
        beginDate: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        endDate: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        beginSignup: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        endSignup: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        //adminId: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        status: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],
        allowJx: [{ required: true, message: this.$t("validate.required"), trigger: "blur" }],

      };
    }
  },
  created() {
    this.dataFormSubmitHandle = useDebounce(this.dataFormSubmitHandle);
    this.areaList(this.area);
    this.selectMatch();
    this.getSysUserList();
    this.picUploadUrl = `${app.api}/sys/oss/upload?token=${getToken()}`;
  },
  methods: {
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataFormRef"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }else{
          this.getSeason();
        }
      });
    },
    // 获取信息
    getInfo() {
      baseService.get("/sp/spmatch/" + this.dataForm.id).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.dataForm = res.data;
        this.selectCity();
      });
    },
    /**
     * 获取赛季
     */
    getSeason(){
      baseService.get("/sys/getSeason").then((res) => {
        if (res.code === 0) {
          this.dataForm.season = res.data;
        }
      });
    },
    // 查询管理员列表
    getSysUserList() {
      baseService.get("/sys/user/list", {}).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
        this.sysUserList = res.data;
      });
    },
    // 表单提交
    dataFormSubmitHandle() {
      this.$refs["dataFormRef"].validate((valid: boolean) => {
        if (!valid) {
          return false;
        }
        //上传报名选择是的话，报名表模板必传
        if(this.dataForm.needRegistFile == '1' && !this.dataForm.registFile){
          this.$message.error("请上传报名表模板");
          return false;
        }

        (!this.dataForm.id ? baseService.post : baseService.put)("/sp/spmatch", this.dataForm).then((res) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.$message({
            message: this.$t("prompt.success"),
            type: "success",
            duration: 500,
            onClose: () => {
              this.visible = false;
              this.$emit("refreshDataList");
            }
          });
        });
      });
    },
    // 获取省份
    areaList(target: any) {
      baseService.get("/front/fast/sys/areaDict/list?pid=" + target.code).then((e: any) => {
        target.item = e.data;
      });
    },
    // 选择城市
    selectCity() {
      if (this.dataForm.province) {
        this.areaCity.code = this.dataForm.province;
        this.areaList(this.areaCity);
      } else {
        this.dataForm.city = "";
        this.areaCity.item = [];
      }
    },
    // 查询所有赛事
    selectMatch() {
      baseService.get("/sp/spmatch/list").then((res) => {
        if (res.code == 0) {
          this.matchList = res.data;
        }
      });
    },
    handleAvatarSuccess(res: IObject, file: IObject, fileList: IObject, type: string) {
      if (type == "pic") {
        this.dataForm.pic = res.data.src;
      }
      if (type == "pic2") {
        this.dataForm.pic2 = res.data.src;
      }
      if (type == "pic3") {
        this.dataForm.pic3 = res.data.src;
      }
      if (type == "pic4") {
        this.dataForm.pic4 = res.data.src;
      }
      if (type == "pic5") {
        this.dataForm.pic5 = res.data.src;
      }
      if (type == "promissFile") {
        this.dataForm.promissFile = res.data.src;
      }
      if (type == "registFile") {
        this.dataForm.registFile = res.data.src;
      }
    },
    beforeAvatarUpload(file: IObject) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (file.type !== "image/jpg" && file.type !== "image/jpeg" && file.type !== "image/png" && file.type !== "image/gif") {
        this.$message.error("只支持jpg、png、gif格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt2M;
    },
    // 承诺书模板上传
    beforeAvatarUploadPromiss(file: IObject) {
      const isLt2M = file.size / 1024 / 1024 < 5;
      if (file.type !== "application/msword" && file.type !=="application/vnd.openxmlformats-officedocument.wordprocessingml.document") {
        this.$message.error("只支持doc、docx格式的图片！");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }
      return isLt2M;
    },
    deleteRegistFile(type: string){
      if(type=='registFile'){
        this.dataForm.registFile = '';
      }
      if(type=='promissFile'){
        this.dataForm.promissFile = '';
      }


    }
  }
});
</script>
